<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>模特姓名管理</title>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
		<jsp:include page="../publicjsp/publicjs.jsp"></jsp:include>
		<style>
			body { font-size: 70%; }
			label, input { display:block; }
			input.text { margin-bottom:12px; width:50%; padding: .4em; }
			fieldset { padding:0; border:0; margin-top:10px; }
			h1 { font-size: 1.2em; margin: .6em 0; }
			div#users-contain { width: 350px; margin: 20px 0; }
			div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
			div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
			.ui-dialog .ui-state-error { padding: .3em; }
			.validateTips { border: 1px solid transparent; padding: 0.3em; }
			.a1{background-color:#f5fafe;}
		</style>
		<script>
		$(function() {
			$( "#dialog:ui-dialog" ).dialog( "destroy" );
			
			var name = $( "#name" );
			var xuhao = $( "#xuhao" );
			
			$( "#add-form-div" ).dialog({
				autoOpen: false,
				height: 200,
				width: 300,
				modal: true,
				buttons: {
					"添加": function() {
						if(name.val().trim()==''){
							$("#name-not-null").dialog("open");
							return false;
						}
						$.post('checkExist.html',{
								modelName:name.val()},function(data){
								if(data.trim()=="true"){
									$("#modelNameLabel").text(name.val());
									$("#modify-alert").dialog("open");
									return false;
								}else{
									$('#add-form').submit();
								}
						});
						
					},
					"关闭": function() {
						$( this ).dialog( "close" );
					}
				},
				close: function() {
				}
			});
			$( "#modify-form-div" ).dialog({
				autoOpen: false,
				height: 200,
				width: 300,
				modal: true,
				buttons: {
					"修改": function() {
						if($("#modifyName").val().trim()==''){
							$("#name-not-null").dialog("open");
							return false;
						}
						$.post('checkExist.html',{
								modelName:$("#modifyName").val()},function(data){
							if(data.trim()=='true'){
								$("#modelNameLabel").text($("#modifyName").val());
								$("#modify-alert").dialog("open");
								return false ;
							}else{
								$('#modify-form').submit();
							}
						});
					},
					"关闭": function() {
						$( this ).dialog( "close" );
					}
				},
				close: function() {
				}
			});
			$( "#create-name" )
				.button()
				.click(function() {
					$( "#add-form-div" ).dialog( "open" );
				});
			$( ".modify" )
				.button()
				.click(function() {
					
					var oldName=$(this).parent().prev().text();
					$("#oldName").val(oldName);
					$("#modifyName").val(oldName);
					$("#modify-form-div" ).dialog( "open" );
					
				});	
			$( ".delete" )
				.button()
				.click(function(){
					var name=$(this).parent().prev().text();
					$("#nameLabel").text(name);
					$('#delName').val(name);
					$( "#delete-confirm" ).dialog("open");
				});	
			$( "#delete-confirm" ).dialog({
				resizable: false,
				autoOpen: false,
				height:140,
				modal: true,
				buttons: {
					"确定": function() {
						$('#delete-form').submit();
						$( this ).dialog( "close" );
					},
					"取消": function() {
						$( this ).dialog( "close" );
					}
				}
			});
			$( "#modify-alert" ).dialog({
				resizable: false,
				autoOpen: false,
				height:140,
				modal: true,
				buttons: {
					"确定": function() {
						$( this ).dialog( "close" );
					}
				}
			});
			
			$( "#name-not-null" ).dialog({
				resizable: false,
				autoOpen: false,
				height:140,
				modal: true,
				buttons: {
					"确定": function() {
						$( this ).dialog( "close" );
					}
				}
			});
			$("tbody tr").mouseover(function(){
				$(this).addClass("a1");
			}).mouseout(function(){
				$(this).removeClass("a1");
			});
		});
		</script>
	</head>
	<body>
		<table width="100%" height="100%" cellpadding="0" cellspacing="0"
			border="0">
			<tr>
				<td valign="top" height="15">
					<table width="100%" style="margin: 0; z-index: 101;" >
						<tr>
							<td align="left" height="15">
								<div style="font-size: 10pt;">
									<font color="#2F4F4F"><b>当前位置：模特信息管理 &gt; 模特姓名管理</b> </font>
								</div>
							</td>
						</tr>
					</table>
				</td>
			</tr>

			<tr>
				<td height="2" valign="top">
					<hr />
				</td>
			</tr>
		</table>
			<button id="create-name">新添</button>
			<div id="add-form-div" title="新添模特姓名">
				<p class="validateTips"></p>
				<form action="saveModelName.html" id="add-form" method="post">
					<fieldset>
						<label for="name">模特姓名</label>
						<input type="text" name="modelName" id="name" class="text ui-widget-content ui-corner-all" />
					</fieldset>
				</form>
			</div>
			<div id="modify-form-div" title="修改模特姓名">
				<form action="modifyModelName.html" id="modify-form" method="post">
					<fieldset>
						<label for="name">模特姓名</label>
						<input type="text" name="modelName" id="modifyName" class="text ui-widget-content ui-corner-all" />
						<input type="hidden" name="oldName" id="oldName" />
					</fieldset>
				</form>
			</div>
			<form action="delModelName.html" id="delete-form" method="post" style="display:none">
					<input type="hidden" name="modelName" id="delName" />	
			</form>
			<div id="users-contain" class="ui-widget">
				<table id="users" class="ui-widget ui-widget-content">
					<thead>
						<tr class="ui-widget-header ">
							<th>序号</th>
							<th>模特姓名</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="dataArea">
					  <c:forEach items="${nameList}" var="modelName" varStatus="status">
			      		<tr>
			      			<td>${status.index + 1 }</td>
			      			<td>${modelName.modelName}</td>
			      			<td><button class="modify">修改</button><button class="delete">删除</button></td>
      					</tr>
      				   </c:forEach>
					</tbody>
				</table>
			</div>
			<input type="hidden" id="xuhao" value="<c:out value="${fn:length(nameList)}"/>"/>
			<div id="delete-confirm" title="提示">
				<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>确定要删除[<span id='nameLabel'></span>]吗?</p>
			</div>
			<div id="modify-alert" title="提示">
				<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>模特姓名[<span id='modelNameLabel'></span>]已存在！</p>
			</div>
			<div id="name-not-null" title="提示">
				<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>[模特姓名]不能为空！</p>
			</div>
	</body>
</html>
